<!--
 * @Author: HeAo
 * @Date: 2021-12-22 16:33:02
 * @LastEditTime: 2022-01-06 11:02:48
 * @LastEditors: Chips
 * @Description: 
 * @FilePath: \am-ui\src\pages\am\order\List.vue
 * 别乱动！
-->
<template>
  <div class="orderList">
    <!-- 搜索框和录入 -->
    <div class="btns">
      <el-select v-model="params.status" placeholder="请选择工单状态" clearable>
        <el-option label="已完成" value="已完成"> </el-option>
        <el-option label="进行中" value="进行中"> </el-option>
        <el-option label="待接单" value="待接单"> </el-option>
      </el-select>
      <el-button
        type="primary"
        @click="toSearchHandler"
        style="
          padding: 0;
          margin-left: 10px;
          width: 70px;
          height: 40px;
          font-size: 16px;
          text-algin: center;
        "
        icon="el-icon-search"
        >查询</el-button
      >
    </div>
    <!-- 标签页 -->
    <el-tabs v-model="params.type" @tab-click="tabHandleClick">
      <el-tab-pane label="安装" name="安装"></el-tab-pane>
      <el-tab-pane label="维修" name="维修"></el-tab-pane>
      <el-tab-pane label="拆机" name="拆机"></el-tab-pane>
    </el-tabs>
    <!-- {{ resData.list }} -->
    <template>
      <el-table :data="resData.list" style="width: 100%">
        <el-table-column
          :index="1"
          type="index"
          label="序号"
          align="center"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="engineer_name"
          label="工程名称"
          align="center"
          width="260px"
        >
        </el-table-column>
        <el-table-column
          prop="device_name"
          label="设备名称"
          width="200px"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="type" label="工单类型" align="center">
        </el-table-column>
        <el-table-column prop="account" label="工人姓名" align="center">
          <template v-slot="{ row }">
            <el-tag type="info" size="mini" v-if="row.account_name == null">
              暂无
            </el-tag>
            <el-tag type="primary" size="mini" v-else>{{
              row.account_name
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="保修原因" align="center" width="260">
          <template v-slot="{ row }">
            <span v-if="row.bill_why == null">暂无</span>
            <span v-else>{{ row.bill_why }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报修时间" width="200px" align="center">
          <template v-slot="{ row }">
            <span>{{ row.create_time | fmtTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="工单状态"
          align="center"
          width="260"
        >
          <template v-slot="scope">
            <el-tag
              size="mini"
              v-if="scope.row.status == '进行中'"
              type="success"
              >进行中</el-tag
            >
            <el-tag
              size="mini"
              v-else-if="scope.row.status == '待接单'"
              type="warning"
              >待接单</el-tag
            >
            <el-tag size="mini" v-else type="danger">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="260" fixed="right">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              @click="toDetailHandler(row)"
              size="small"
            >
              详情
            </el-button>
            <el-button
              v-if="row.status == '待接单'"
              style="background: red; color: #ffffff"
              @click="toCancelHandler(row.id)"
              size="small"
            >
              取消
            </el-button>
            <el-button v-else type="info" size="small" disabled>
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页组件 -->
    <div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="parseInt(resData.page)"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="parseInt(resData.pageSize)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="parseInt(resData.total)"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      resData: [],

      params: {
        page: 1,
        pageSize: 10,
        type: "安装",
      },
    };
  },
  computed: {},
  methods: {
    findAllOrders() {
      get("/workorder/pageQuery", this.params).then((res) => {
        this.resData = res.data;
      });
    },
    toSearchHandler() {
      this.findAllOrders();
    },
    // 标签页点击函数
    tabHandleClick() {
      this.findAllOrders();
    },
    // pageSize改变事件
    handleSizeChange(pageSize) {
      // console.log(`每页 ${pageSize} 条`);
      // 将分页插件最新的参数赋值给params
      this.params.pageSize = pageSize;
      // 调用查询设备的方法（数据重载）
      this.findAllOrders();
    },
    // page改变事件
    handleCurrentChange(page) {
      // console.log(`当前页: ${page}`);
      this.params.page = page;
      this.findAllOrders();
    },
    //详情按钮
    toDetailHandler(row) {
      this.$router.push({
        path: "Details",
        query: row,
      });
    },
    //取消按钮点击事件
    toCancelHandler(id) {
      this.$confirm("此操作将取消该工单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        get("/workorder/cancelOrder", { id }).then((res) => {
          this.$message.success("删除成功");
          this.findAllOrders();
        });
      });
    },
  },
  created() {
    this.findAllOrders();
  },
};
</script>
<style scoped>
.btns {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
  /* flex-direction: row-reverse; */
  justify-content: flex-end;
  margin-right: 4%;
  /* 右对齐 */
}
.el-select {
  width: 20%;
}
</style>